/**
 * DragRotate
 * @param  {[type]} $ [description]
 * @return {[type]}   [description]
 */
export default {
	install(Vue, options) {
		Vue.prototype.dragRotate = function (params){
			var d = this;
			this.defaults = {
				targetId: '',
				dragCount: 0
			};
			var defaults = this.defaults;
			params = params || {};
			for (var def in defaults) {
				if (typeof params[def] === 'undefined') {
					params[def] = defaults[def];
				}
				else if (typeof params[def] === 'object') {
					for (var deepDef in defaults[def]) {
						if (typeof params[def][deepDef] === 'undefined') {
							params[def][deepDef] = defaults[def][deepDef];
						}
					}
				}
			}
			d.params = params;

			d.container = document.querySelector('#dragger');

			d.init = function() {
				d.currIndex = 0;
				d.css('.drag-wrapper', {transform: 'translate3d(0,0,0) rotateX(0deg) rotateY(0deg)'});
			};
			var targetObj = document.querySelector('#dragger');
			targetObj.addEventListener('touchstart', function(event){d.onTouchStart(event);}, false);
			targetObj.addEventListener('touchmove', function(event){d.onTouchMove(event)}, false);
			targetObj.addEventListener('touchend', function(event){d.onTouchEnd(event)}, false);
			
			var isTouch,isMove,isEnd,rotateX=0,rotateY=0;
			d.touches = {
				startX: 0,
				startY: 0,
				currentX: 0,
				currentY: 0,
				absX: 0,
				absY: 0,
				diff: 0
			};
			d.onTouchStart = function(e) {
				if (e.originalEvent) e = e.originalEvent;
				d.touches.startX = d.touches.currentX = e.type === 'touchstart' ? e.targetTouches[0].pageX : e.pageX;
				d.touches.startY = d.touches.currentY = e.type === 'touchstart' ? e.targetTouches[0].pageY : e.pageY;
				rotateY = 0;
				d.touches.diff = 0;
			};
			d.onTouchMove = function(e) {
				if (e.originalEvent) e = e.originalEvent;
				if (e.targetTouches && e.targetTouches.length > 1) return;

				d.touches.currentX = e.type === 'touchmove' ? e.targetTouches[0].pageX : e.pageX;
				d.touches.currentY = e.type === 'touchmove' ? e.targetTouches[0].pageY : e.pageY;

				d.touches.absX = d.touches.currentX - d.touches.startX;
				d.touches.absY = d.touches.currentY - d.touches.startY;
				if((Math.abs(d.touches.absX)>Math.abs(d.touches.absY)&&d.touches.absX>0)||(Math.abs(d.touches.absX)>Math.abs(d.touches.absY)&&d.touches.absX<0)) {
					d.touches.diff = d.touches.absX;
				} else {
					d.touches.diff = 0;
				}
				rotateY = Math.ceil((d.touches.diff / d.container.offsetWidth) * 180);
				if (rotateY >= 135) {
					return;
				}
				d.css('.drag-wrapper', {transform: 'translate3d(0,0,0) rotateX('+rotateX+'deg) rotateY('+rotateY+'deg)'});
			};
			d.onTouchEnd = function(e) {
				if (e.originalEvent) e = e.originalEvent;
				if (!d.touches.diff) return;
				if (Math.abs(rotateY) >= 90) {
					if (rotateY < 0 && d.currIndex < d.params.dragCount-1) {
						d.currIndex++;
					} else if (rotateY > 0 && d.currIndex > 0) {
						d.currIndex--;
					}
					rotateY = 270;
					d.css('.drag-wrapper', {transform: 'translate3d(0,0,0) rotateX(0deg) rotateY(360deg)', transition: 'transform 0.5s ease-out 0s'});
				} else {
					d.css('.drag-wrapper', {transform: 'translate3d(0,0,0) rotateX(0deg) rotateY(0deg)', transition: 'transform 0.5s ease-out 0s'});
				}
				setTimeout(function () {
					d.css('.drag-wrapper', {transform: 'translate3d(0,0,0) rotateX(0deg) rotateY(0deg)', transition: ''});
				}, 500);
				if (d.touches.diff) {
					d.emit('onDragChangeStart', d);
				}
			};
			d.emit = function (eventName) {
				if (d.params[eventName]) {
					d.params[eventName](arguments[1], arguments[2], arguments[3], arguments[4], arguments[5]);
				}
			};
			d.S = function (selector) {
				return document.querySelector(selector);
			};
			d.css = function (selector, options) {
				for (var i in options) {
					d.S(selector).style[i] = options[i];
				}
			}
			d.init();
			return d;
		};
	}
}